<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七年级对话补全互动练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%);
            min-height: 100vh;
            padding: 10px;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 30px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '🌱';
            position: absolute;
            font-size: 80px;
            opacity: 0.15;
            top: -10px;
            right: 20px;
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(10deg); }
        }
        
        .header h1 {
            font-size: 24px;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }
        
        .header p {
            font-size: 14px;
            opacity: 0.95;
            position: relative;
            z-index: 1;
        }
        
        .progress-bar {
            background: #e5e7eb;
            height: 8px;
            position: relative;
            overflow: hidden;
        }
        
        .progress-fill {
            background: linear-gradient(90deg, #10b981, #34d399);
            height: 100%;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .info-bar {
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            background: #f0fdf4;
            border-bottom: 2px solid #d1fae5;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #059669;
        }
        
        .info-item strong {
            font-weight: 600;
        }
        
        .content {
            padding: 20px;
        }
        
        .dialogue-card {
            background: white;
            border: 3px solid #d1fae5;
            border-radius: 15px;
            margin-bottom: 25px;
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .dialogue-card:hover {
            box-shadow: 0 5px 20px rgba(16, 185, 129, 0.2);
        }
        
        .card-header {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .card-number {
            background: white;
            color: #10b981;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
        }
        
        .card-title {
            flex: 1;
            font-size: 15px;
            font-weight: 600;
        }
        
        .options-section {
            background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
            padding: 20px;
            border-bottom: 2px dashed #a7f3d0;
        }
        
        .options-title {
            color: #059669;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        
        .options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 10px;
        }
        
        .option-item {
            background: white;
            padding: 10px 12px;
            border-radius: 8px;
            border: 2px solid #d1fae5;
            font-size: 14px;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .option-item:hover {
            border-color: #10b981;
            transform: translateX(3px);
        }
        
        .option-item.used {
            background: #d1fae5;
            border-color: #10b981;
        }
        
        .option-label {
            font-weight: bold;
            color: #10b981;
            margin-right: 8px;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .dialogue-line {
            margin-bottom: 15px;
            line-height: 1.8;
            font-size: 15px;
        }
        
        .speaker {
            font-weight: bold;
            color: #059669;
            display: inline-block;
            min-width: 70px;
        }
        
        .blank-input {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0 4px;
        }
        
        .blank-label {
            background: #10b981;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .answer-input {
            width: 50px;
            height: 35px;
            border: 2px solid #d1fae5;
            border-radius: 8px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #059669;
            text-transform: uppercase;
            transition: all 0.3s;
        }
        
        .answer-input:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
            transform: scale(1.05);
        }
        
        .answer-input.correct {
            background: #d1fae5;
            border-color: #10b981;
        }
        
        .answer-input.wrong {
            background: #fee2e2;
            border-color: #ef4444;
            animation: shake 0.5s;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        .correct-answer {
            display: none;
            color: #10b981;
            font-size: 13px;
            margin-left: 5px;
            font-weight: bold;
        }
        
        .answer-input.wrong + .correct-answer {
            display: inline;
        }
        
        .action-bar {
            position: sticky;
            bottom: 0;
            background: white;
            border-top: 3px solid #10b981;
            padding: 15px 20px;
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
        }
        
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn:active {
            transform: scale(0.95);
        }
        
        .btn-submit {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
        
        .btn-submit:hover {
            box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
            transform: translateY(-2px);
        }
        
        .btn-reset {
            background: #f3f4f6;
            color: #6b7280;
        }
        
        .btn-reset:hover {
            background: #e5e7eb;
        }
        
        .btn-show {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }
        
        .btn-show:hover {
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
        }
        
        .result-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
            backdrop-filter: blur(5px);
        }
        
        .result-modal.show {
            display: flex;
            animation: fadeIn 0.3s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .result-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: slideUp 0.3s;
        }
        
        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .result-header {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .result-score {
            font-size: 60px;
            font-weight: bold;
            color: #10b981;
            margin: 10px 0;
        }
        
        .result-score.low {
            color: #ef4444;
        }
        
        .result-score.medium {
            color: #f59e0b;
        }
        
        .result-emoji {
            font-size: 80px;
            margin-bottom: 10px;
        }
        
        .result-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin: 20px 0;
        }
        
        .stat-item {
            text-align: center;
            padding: 15px;
            background: #f0fdf4;
            border-radius: 10px;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #10b981;
        }
        
        .stat-label {
            font-size: 12px;
            color: #6b7280;
            margin-top: 5px;
        }
        
        .result-message {
            text-align: center;
            color: #6b7280;
            margin: 20px 0;
            line-height: 1.6;
        }
        
        .btn-close {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }
        
        @media (max-width: 640px) {
            .header h1 {
                font-size: 20px;
            }
            
            .options-grid {
                grid-template-columns: 1fr;
            }
            
            .result-score {
                font-size: 48px;
            }
            
            .result-emoji {
                font-size: 60px;
            }
            
            .action-bar {
                padding: 12px 15px;
            }
            
            .btn {
                padding: 10px 20px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🌟 七年级对话补全互动练习 🌟</h1>
            <p>Try Something New & Accept Yourself</p>
        </div>
        
        <div class="progress-bar">
            <div class="progress-fill" id="progressBar"></div>
        </div>
        
        <div class="info-bar">
            <div class="info-item">
                <span>📝</span>
                <span><strong>已完成:</strong> <span id="completedCount">0</span>/30</span>
            </div>
            <div class="info-item">
                <span>✅</span>
                <span><strong>正确:</strong> <span id="correctCount">0</span></span>
            </div>
            <div class="info-item">
                <span>❌</span>
                <span><strong>错误:</strong> <span id="wrongCount">0</span></span>
            </div>
        </div>
        
        <div class="content" id="dialogueContainer">
            <!-- 对话1 -->
            <div class="dialogue-card" data-dialogue="1">
                <div class="card-header">
                    <div class="card-number">1</div>
                    <div class="card-title">克服恐惧 - Drama Club</div>
                </div>
                
                <div class="options-section">
                    <div class="options-title">💬 选项 Options (7选5)</div>
                    <div class="options-grid">
                        <div class="option-item" data-option="A">
                            <span class="option-label">A.</span>I'm really nervous about performing on stage.
                        </div>
                        <div class="option-item" data-option="B">
                            <span class="option-label">B.</span>Everyone feels that way at first.
                        </div>
                        <div class="option-item" data-option="C">
                            <span class="option-label">C.</span>What if I forget my lines?
                        </div>
                        <div class="option-item" data-option="D">
                            <span class="option-label">D.</span>I don't like acting at all.
                        </div>
                        <div class="option-item" data-option="E">
                            <span class="option-label">E.</span>You're right. I should give it a try!
                        </div>
                        <div class="option-item" data-option="F">
                            <span class="option-label">F.</span>That's why we practice so much.
                        </div>
                        <div class="option-item" data-option="G">
                            <span class="option-label">G.</span>When is the next performance?
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="dialogue-line">
                        <span class="speaker">Lily:</span>
                        Hey, Mike! I heard the Drama Club is looking for new members. Are you interested?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Mike:</span>
                        I'd love to join, but
                        <span class="blank-input">
                            <span class="blank-label">1</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="A" data-question="1">
                            <span class="correct-answer">✓ A</span>
                        </span>
                        What if I make mistakes in front of everyone?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Lily:</span>
                        <span class="blank-input">
                            <span class="blank-label">2</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="B" data-question="2">
                            <span class="correct-answer">✓ B</span>
                        </span>
                        I was scared too when I first joined. But the more you practice, the more confident you become.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Mike:</span>
                        Really?
                        <span class="blank-input">
                            <span class="blank-label">3</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="C" data-question="3">
                            <span class="correct-answer">✓ C</span>
                        </span>
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Lily:</span>
                        <span class="blank-input">
                            <span class="blank-label">4</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="F" data-question="4">
                            <span class="correct-answer">✓ F</span>
                        </span>
                        Plus, everyone in the club is super supportive. They'll help you if you need it.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Mike:</span>
                        <span class="blank-input">
                            <span class="blank-label">5</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="E" data-question="5">
                            <span class="correct-answer">✓ E</span>
                        </span>
                        I won't let fear stop me from trying something new!
                    </div>
                </div>
            </div>
            
            <!-- 对话2 -->
            <div class="dialogue-card" data-dialogue="2">
                <div class="card-header">
                    <div class="card-number">2</div>
                    <div class="card-title">接受不完美 - Basketball</div>
                </div>
                
                <div class="options-section">
                    <div class="options-title">💬 选项 Options (7选5)</div>
                    <div class="options-grid">
                        <div class="option-item" data-option="A">
                            <span class="option-label">A.</span>But I'm not very good at basketball.
                        </div>
                        <div class="option-item" data-option="B">
                            <span class="option-label">B.</span>That's the spirit! We start practice tomorrow.
                        </div>
                        <div class="option-item" data-option="C">
                            <span class="option-label">C.</span>It's not about being perfect right away.
                        </div>
                        <div class="option-item" data-option="D">
                            <span class="option-label">D.</span>I hate sports.
                        </div>
                        <div class="option-item" data-option="E">
                            <span class="option-label">E.</span>What if other people laugh at me?
                        </div>
                        <div class="option-item" data-option="F">
                            <span class="option-label">F.</span>You're right. I'll focus on improving myself.
                        </div>
                        <div class="option-item" data-option="G">
                            <span class="option-label">G.</span>Everyone is here to learn and grow together.
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="dialogue-line">
                        <span class="speaker">Coach:</span>
                        Sarah, you've been watching our basketball practices. Would you like to join the team?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Sarah:</span>
                        I really want to, but
                        <span class="blank-input">
                            <span class="blank-label">6</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="A" data-question="6">
                            <span class="correct-answer">✓ A</span>
                        </span>
                        I'm afraid I'll slow everyone down.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Coach:</span>
                        <span class="blank-input">
                            <span class="blank-label">7</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="C" data-question="7">
                            <span class="correct-answer">✓ C</span>
                        </span>
                        It's about trying your best and having fun. That's what makes you a real team player.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Sarah:</span>
                        But
                        <span class="blank-input">
                            <span class="blank-label">8</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="E" data-question="8">
                            <span class="correct-answer">✓ E</span>
                        </span>
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Coach:</span>
                        <span class="blank-input">
                            <span class="blank-label">9</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="G" data-question="9">
                            <span class="correct-answer">✓ G</span>
                        </span>
                        We support each other, no matter what level we're at.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Sarah:</span>
                        Thank you, Coach.
                        <span class="blank-input">
                            <span class="blank-label">10</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="F" data-question="10">
                            <span class="correct-answer">✓ F</span>
                        </span>
                        I'm ready to join!
                    </div>
                </div>
            </div>
            
            <!-- 对话3 -->
            <div class="dialogue-card" data-dialogue="3">
                <div class="card-header">
                    <div class="card-number">3</div>
                    <div class="card-title">做真实自己 - Cooking Club</div>
                </div>
                
                <div class="options-section">
                    <div class="options-title">💬 选项 Options (7选5)</div>
                    <div class="options-grid">
                        <div class="option-item" data-option="A">
                            <span class="option-label">A.</span>Some guys at school might make fun of me.
                        </div>
                        <div class="option-item" data-option="B">
                            <span class="option-label">B.</span>That's ridiculous! Cooking is for everyone.
                        </div>
                        <div class="option-item" data-option="C">
                            <span class="option-label">C.</span>I've always loved cooking with my dad.
                        </div>
                        <div class="option-item" data-option="D">
                            <span class="option-label">D.</span>What do we cook in the club?
                        </div>
                        <div class="option-item" data-option="E">
                            <span class="option-label">E.</span>You're absolutely right! I shouldn't care what others think.
                        </div>
                        <div class="option-item" data-option="F">
                            <span class="option-label">F.</span>Many famous chefs are men.
                        </div>
                        <div class="option-item" data-option="G">
                            <span class="option-label">G.</span>I'm terrible at cooking.
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="dialogue-line">
                        <span class="speaker">Emma:</span>
                        Alex, I saw you looking at the Cooking Club poster. Are you thinking about joining?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Alex:</span>
                        Yeah, I am.
                        <span class="blank-input">
                            <span class="blank-label">11</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="C" data-question="11">
                            <span class="correct-answer">✓ C</span>
                        </span>
                        But I'm worried that people will think it's weird for a boy to join.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Emma:</span>
                        <span class="blank-input">
                            <span class="blank-label">12</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="B" data-question="12">
                            <span class="correct-answer">✓ B</span>
                        </span>
                        <span class="blank-input">
                            <span class="blank-label">13</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="F" data-question="13">
                            <span class="correct-answer">✓ F</span>
                        </span>
                        You should follow your passion!
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Alex:</span>
                        I guess you're right. But
                        <span class="blank-input">
                            <span class="blank-label">14</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="A" data-question="14">
                            <span class="correct-answer">✓ A</span>
                        </span>
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Emma:</span>
                        Who cares? Do what makes YOU happy. Life's too short to worry about other people's opinions.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Alex:</span>
                        <span class="blank-input">
                            <span class="blank-label">15</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="E" data-question="15">
                            <span class="correct-answer">✓ E</span>
                        </span>
                        I'm going to sign up right now!
                    </div>
                </div>
            </div>
            
            <!-- 对话4 -->
            <div class="dialogue-card" data-dialogue="4">
                <div class="card-header">
                    <div class="card-number">4</div>
                    <div class="card-title">拥抱挑战 - Science Competition</div>
                </div>
                
                <div class="options-section">
                    <div class="options-title">💬 选项 Options (7选5)</div>
                    <div class="options-grid">
                        <div class="option-item" data-option="A">
                            <span class="option-label">A.</span>I'm scared I won't be good enough.
                        </div>
                        <div class="option-item" data-option="B">
                            <span class="option-label">B.</span>Failure is just part of learning.
                        </div>
                        <div class="option-item" data-option="C">
                            <span class="option-label">C.</span>What matters is that you challenge yourself.
                        </div>
                        <div class="option-item" data-option="D">
                            <span class="option-label">D.</span>I don't like science.
                        </div>
                        <div class="option-item" data-option="E">
                            <span class="option-label">E.</span>You know what? You're right. I'll sign up!
                        </div>
                        <div class="option-item" data-option="F">
                            <span class="option-label">F.</span>When is the competition?
                        </div>
                        <div class="option-item" data-option="G">
                            <span class="option-label">G.</span>Even if you don't win, you'll learn so much.
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="dialogue-line">
                        <span class="speaker">Mr. Lee:</span>
                        Tom, you're excellent at science. Have you considered entering the Science Fair competition?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Tom:</span>
                        I've thought about it, but
                        <span class="blank-input">
                            <span class="blank-label">16</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="A" data-question="16">
                            <span class="correct-answer">✓ A</span>
                        </span>
                        What if I fail?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Mr. Lee:</span>
                        <span class="blank-input">
                            <span class="blank-label">17</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="B" data-question="17">
                            <span class="correct-answer">✓ B</span>
                        </span>
                        Some of the greatest scientists failed many times before they succeeded.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Tom:</span>
                        But what if everyone else is smarter than me?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Mr. Lee:</span>
                        <span class="blank-input">
                            <span class="blank-label">18</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="C" data-question="18">
                            <span class="correct-answer">✓ C</span>
                        </span>
                        <span class="blank-input">
                            <span class="blank-label">19</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="G" data-question="19">
                            <span class="correct-answer">✓ G</span>
                        </span>
                        That's what makes competitions valuable.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Tom:</span>
                        <span class="blank-input">
                            <span class="blank-label">20</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="E" data-question="20">
                            <span class="correct-answer">✓ E</span>
                        </span>
                        I won't let fear hold me back!
                    </div>
                </div>
            </div>
            
            <!-- 对话5 -->
            <div class="dialogue-card" data-dialogue="5">
                <div class="card-header">
                    <div class="card-number">5</div>
                    <div class="card-title">展现真我 - Talent Show</div>
                </div>
                
                <div class="options-section">
                    <div class="options-title">💬 选项 Options (7选5)</div>
                    <div class="options-grid">
                        <div class="option-item" data-option="A">
                            <span class="option-label">A.</span>I want to perform my own song, but it's very personal.
                        </div>
                        <div class="option-item" data-option="B">
                            <span class="option-label">B.</span>That's what makes it special!
                        </div>
                        <div class="option-item" data-option="C">
                            <span class="option-label">C.</span>Being authentic is more important than being perfect.
                        </div>
                        <div class="option-item" data-option="D">
                            <span class="option-label">D.</span>I can't sing well.
                        </div>
                        <div class="option-item" data-option="E">
                            <span class="option-label">E.</span>People might not like my style of music.
                        </div>
                        <div class="option-item" data-option="F">
                            <span class="option-label">F.</span>Thank you! I'm going to perform my original song!
                        </div>
                        <div class="option-item" data-option="G">
                            <span class="option-label">G.</span>What instrument will you use?
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="dialogue-line">
                        <span class="speaker">Maya:</span>
                        Sophie, are you signing up for the school talent show?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Sophie:</span>
                        I'm not sure.
                        <span class="blank-input">
                            <span class="blank-label">21</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="A" data-question="21">
                            <span class="correct-answer">✓ A</span>
                        </span>
                        I'm afraid people won't understand it.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Maya:</span>
                        <span class="blank-input">
                            <span class="blank-label">22</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="B" data-question="22">
                            <span class="correct-answer">✓ B</span>
                        </span>
                        When you share something from your heart, people can feel it.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Sophie:</span>
                        Really? But
                        <span class="blank-input">
                            <span class="blank-label">23</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="E" data-question="23">
                            <span class="correct-answer">✓ E</span>
                        </span>
                        Maybe I should just do a popular song instead.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Maya:</span>
                        No!
                        <span class="blank-input">
                            <span class="blank-label">24</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="C" data-question="24">
                            <span class="correct-answer">✓ C</span>
                        </span>
                        Your unique voice is what makes you YOU.
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Sophie:</span>
                        <span class="blank-input">
                            <span class="blank-label">25</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="F" data-question="25">
                            <span class="correct-answer">✓ F</span>
                        </span>
                        I'm going to be brave and be myself!
                    </div>
                </div>
            </div>
            
            <!-- 对话6 -->
            <div class="dialogue-card" data-dialogue="6">
                <div class="card-header">
                    <div class="card-number">6</div>
                    <div class="card-title">突破舒适区 - Debate Club</div>
                </div>
                
                <div class="options-section">
                    <div class="options-title">💬 选项 Options (7选5)</div>
                    <div class="options-grid">
                        <div class="option-item" data-option="A">
                            <span class="option-label">A.</span>I'm really shy and quiet. Debate seems impossible for me.
                        </div>
                        <div class="option-item" data-option="B">
                            <span class="option-label">B.</span>Being introverted doesn't mean you can't debate.
                        </div>
                        <div class="option-item" data-option="C">
                            <span class="option-label">C.</span>Some of the best debaters are introverts.
                        </div>
                        <div class="option-item" data-option="D">
                            <span class="option-label">D.</span>I prefer to stay quiet.
                        </div>
                        <div class="option-item" data-option="E">
                            <span class="option-label">E.</span>What if I can't think of arguments quickly?
                        </div>
                        <div class="option-item" data-option="F">
                            <span class="option-label">F.</span>We'll teach you strategies and give you time to prepare.
                        </div>
                        <div class="option-item" data-option="G">
                            <span class="option-label">G.</span>You've inspired me! I'll join the Debate Club!
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="dialogue-line">
                        <span class="speaker">Daniel:</span>
                        Rachel, I noticed you're always reading about current events. Have you thought about joining the Debate Club?
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Rachel:</span>
                        Me? No way.
                        <span class="blank-input">
                            <span class="blank-label">26</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="A" data-question="26">
                            <span class="correct-answer">✓ A</span>
                        </span>
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Daniel:</span>
                        <span class="blank-input">
                            <span class="blank-label">27</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="B" data-question="27">
                            <span class="correct-answer">✓ B</span>
                        </span>
                        <span class="blank-input">
                            <span class="blank-label">28</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="C" data-question="28">
                            <span class="correct-answer">✓ C</span>
                        </span>
                        They think deeply before speaking, which is a strength!
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Rachel:</span>
                        I never thought of it that way. But
                        <span class="blank-input">
                            <span class="blank-label">29</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="E" data-question="29">
                            <span class="correct-answer">✓ E</span>
                        </span>
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Daniel:</span>
                        <span class="blank-input">
                            <span class="blank-label">30</span>
                            <input type="text" class="answer-input" maxlength="1" data-answer="F" data-question="30">
                            <span class="correct-answer">✓ F</span>
                        </span>
                        You don't have to change who you are – just develop new skills!
                    </div>
                    <div class="dialogue-line">
                        <span class="speaker">Rachel:</span>
                        You've inspired me! I'll join the Debate Club! It's time to challenge myself!
                    </div>
                </div>
            </div>
        </div>
        
        <div class="action-bar">
            <button class="btn btn-submit" onclick="checkAnswers()">
                <span>✓</span>
                <span>提交批改</span>
            </button>
            <button class="btn btn-show" onclick="showAllAnswers()">
                <span>👁️</span>
                <span>查看答案</span>
            </button>
            <button class="btn btn-reset" onclick="resetAll()">
                <span>🔄</span>
                <span>重新开始</span>
            </button>
        </div>
    </div>
    
    <!-- 结果弹窗 -->
    <div class="result-modal" id="resultModal">
        <div class="result-content">
            <div class="result-header">
                <div class="result-emoji" id="resultEmoji">🎉</div>
                <h2 id="resultTitle">批改完成！</h2>
                <div class="result-score" id="resultScore">0</div>
                <p style="color: #6b7280;">满分30分</p>
            </div>
            
            <div class="result-stats">
                <div class="stat-item">
                    <div class="stat-number" id="statCorrect">0</div>
                    <div class="stat-label">答对</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="statWrong">0</div>
                    <div class="stat-label">答错</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="statEmpty">0</div>
                    <div class="stat-label">未答</div>
                </div>
            </div>
            
            <div class="result-message" id="resultMessage"></div>
            
            <button class="btn-close" onclick="closeModal()">确定</button>
        </div>
    </div>
    
    <script>
        // 更新统计
        function updateStats() {
            const inputs = document.querySelectorAll('.answer-input');
            let completed = 0;
            let correct = 0;
            let wrong = 0;
            
            inputs.forEach(input => {
                const value = input.value.toUpperCase().trim();
                if (value) {
                    completed++;
                    const answer = input.dataset.answer;
                    if (value === answer) {
                        correct++;
                    } else {
                        wrong++;
                    }
                }
            });
            
            document.getElementById('completedCount').textContent = completed;
            document.getElementById('correctCount').textContent = correct;
            document.getElementById('wrongCount').textContent = wrong;
            
            const progress = (completed / 30) * 100;
            document.getElementById('progressBar').style.width = progress + '%';
            
            updateOptionStatus();
        }
        
        // 更新选项状态
        function updateOptionStatus() {
            document.querySelectorAll('.dialogue-card').forEach(card => {
                const inputs = card.querySelectorAll('.answer-input');
                const options = card.querySelectorAll('.option-item');
                const usedLetters = new Set();
                
                inputs.forEach(input => {
                    const value = input.value.toUpperCase().trim();
                    if (value) {
                        usedLetters.add(value);
                    }
                });
                
                options.forEach(option => {
                    const letter = option.dataset.option;
                    if (usedLetters.has(letter)) {
                        option.classList.add('used');
                    } else {
                        option.classList.remove('used');
                    }
                });
            });
        }
        
        // 监听输入
        document.querySelectorAll('.answer-input').forEach(input => {
            input.addEventListener('input', function() {
                this.value = this.value.toUpperCase();
                this.classList.remove('correct', 'wrong');
                updateStats();
            });
            
            input.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    const nextInput = this.closest('.dialogue-line').nextElementSibling?.querySelector('.answer-input');
                    if (nextInput) {
                        nextInput.focus();
                    } else {
                        const nextCard = this.closest('.dialogue-card').nextElementSibling;
                        if (nextCard) {
                            nextCard.querySelector('.answer-input')?.focus();
                        }
                    }
                }
            });
        });
        
        // 批改答案
        function checkAnswers() {
            const inputs = document.querySelectorAll('.answer-input');
            let correct = 0;
            let wrong = 0;
            let empty = 0;
            
            inputs.forEach(input => {
                const value = input.value.toUpperCase().trim();
                const answer = input.dataset.answer;
                
                if (!value) {
                    empty++;
                    input.classList.remove('correct', 'wrong');
                } else if (value === answer) {
                    correct++;
                    input.classList.add('correct');
                    input.classList.remove('wrong');
                } else {
                    wrong++;
                    input.classList.add('wrong');
                    input.classList.remove('correct');
                }
            });
            
            showResult(correct, wrong, empty);
            updateStats();
        }
        
        // 显示结果弹窗
        function showResult(correct, wrong, empty) {
            const score = correct;
            const percentage = (correct / 30) * 100;
            
            document.getElementById('resultScore').textContent = score;
            document.getElementById('statCorrect').textContent = correct;
            document.getElementById('statWrong').textContent = wrong;
            document.getElementById('statEmpty').textContent = empty;
            
            const scoreElement = document.getElementById('resultScore');
            const emojiElement = document.getElementById('resultEmoji');
            const messageElement = document.getElementById('resultMessage');
            
            if (percentage >= 90) {
                scoreElement.className = 'result-score';
                emojiElement.textContent = '🎉';
                messageElement.innerHTML = '<strong>优秀！</strong><br>你对对话补全的掌握非常扎实！<br>继续保持这种学习态度！';
            } else if (percentage >= 75) {
                scoreElement.className = 'result-score';
                emojiElement.textContent = '😊';
                messageElement.innerHTML = '<strong>良好！</strong><br>大部分题目都答对了！<br>再仔细看看错题就更完美了！';
            } else if (percentage >= 60) {
                scoreElement.className = 'result-score medium';
                emojiElement.textContent = '💪';
                messageElement.innerHTML = '<strong>及格！</strong><br>基础还不错，但还有提升空间。<br>建议复习错题，理解对话逻辑！';
            } else {
                scoreElement.className = 'result-score low';
                emojiElement.textContent = '📚';
                messageElement.innerHTML = '<strong>继续努力！</strong><br>多读几遍对话，理解上下文关系。<br>记住：练习是进步的关键！';
            }
            
            document.getElementById('resultModal').classList.add('show');
        }
        
        // 关闭弹窗
        function closeModal() {
            document.getElementById('resultModal').classList.remove('show');
        }
        
        // 显示所有答案
        function showAllAnswers() {
            document.querySelectorAll('.answer-input').forEach(input => {
                const answer = input.dataset.answer;
                input.value = answer;
                input.classList.add('correct');
                input.classList.remove('wrong');
            });
            updateStats();
        }
        
        // 重置所有
        function resetAll() {
            if (confirm('确定要清空所有答案，重新开始吗？')) {
                document.querySelectorAll('.answer-input').forEach(input => {
                    input.value = '';
                    input.classList.remove('correct', 'wrong');
                });
                updateStats();
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        }
        
        // 选项点击功能
        document.querySelectorAll('.option-item').forEach(option => {
            option.addEventListener('click', function() {
                const letter = this.dataset.option;
                const card = this.closest('.dialogue-card');
                const emptyInput = card.querySelector('.answer-input:not([value]), .answer-input[value=""]');
                if (emptyInput) {
                    emptyInput.value = letter;
                    emptyInput.focus();
                    updateStats();
                }
            });
        });
        
        // 初始化
        updateStats();
        
        // 点击模态框背景关闭
        document.getElementById('resultModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });
    </script>
</body>
</html>